<template>
    <el-dialog :title="type == 'add' ? '添加'+organizationName+'下属部门':'修改'+organizationName"
               :visible="dialogFormVisible" width="30%" :show-close="false">

        <template slot="title">
            <h1 v-if="type == 'add' "> 添加<i style="color: red">{{organizationName}}</i>下属部门 </h1>
            <h1 v-if="type == 'edit' "> 修改{{organizationName}}</h1>
        </template>

        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"
                          :placeholder="type == 'add'?'请输入部门名称':'请输入修改后部门名称'"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" :label-width="formLabelWidth" prop="description">
                <el-input v-model="form.description" autocomplete="off"
                          :placeholder="type == 'add'?'请输入部门描述':'请输入修改后部门描述'"></el-input>
            </el-form-item>
            <el-form-item label="部门负责人" :label-width="formLabelWidth" prop="principleName">
                <el-autocomplete
                        style="width: 100%;"
                        v-model="form.principleName"
                        :fetch-suggestions="querySearch"
                        :placeholder="type == 'add'?'请输入部门负责人':'请输入修改后部门负责人'"
                        :trigger-on-focus="false"
                        @select="handleSelect"
                ></el-autocomplete>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-if="type == 'edit'" type="primary" @click="submitModifyOrg()">确 定</el-button>
            <el-button v-if="type == 'add'" type="primary" @click="submitAddOrg()">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {systemApi,commonApi} from "../../api/api";
    import {validator} from "../../utils/validator";

    export default {
        data() {
            return {
                form: {
                    name: null,
                    description: null,
                    principleId: null,
                    principleName: null,
                    parentId: null
                },
                formLabelWidth: '100px',
                rules: {
                    name: {required: true, validator: validator.organizationName, trigger: 'blur'},
                    description: {required: true, trigger: 'blur'},
                    principleName: {validator: validator.principleName, trigger: 'blur'},
                },
                dialogFormVisible: false,
                type: "add", // 1新增 2编辑
                index: null,
                organizationName: null
            };
        },
        methods: {
            submitModifyOrg() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        systemApi.updateOrganization(this.form)
                            .then(commonApi.popoverSuccessMessage, commonApi.popoverErrorMessage)
                            .catch(commonApi.popoverErrorMessage);
                        this.dialogFormVisible = false;
                    }
                })
            },
            submitAddOrg() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        systemApi.addOrganization(this.form).then(res => {
                                this.$message({message: res.data.msg, type: 'success'})
                            },
                            commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
                        this.dialogFormVisible = false;
                    }
                })
            },
            querySearch(name, cb) {
                systemApi.queryUser({name}).then(res => {
                    cb(res.data.data)
                }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
            },
            handleSelect(item) {
                this.form.principleId = item.id;
                this.form.principleName = item.value;
            },
            setData(key, value) {
                this[key] = value
                return this
            }
        }
    };
</script>